<template>
  <div class="watermarkbox">
    <div class="watermarkMsg">
      <div class="fontW-7 font-30 font-f-ib theme-color border-3-ff border-r pd-20 font-f-ib">{{$t('watermark.title')}}</div>
      <div class="watermarkMsg_imge">
        <div class="fontW-7 font-30 color-4 border-r">
          <p class="pd-10 font-f-ib">{{msg}}</p>
        </div>
      </div>
    </div>
    <div class="flex-s-between mgt-30 fontW-9 font-30 color-f font-f-ib eg">
      <div class="text-c">{{$t('watermark.before_emb')}}</div>
      <div class="text-c">{{$t('watermark.atter_emb')}}</div>
      <div class="text-c">{{$t('watermark.characteristics_info')}}</div>
    </div>
    <div class="flex-s-between">
      <div class="watermarkImg" >
        <div class="bd-r-10 Img_d">
          <img src="../../assets/img/watermarkP.svg" alt="" style="width:100%">
        </div>
      </div>
      <div class="mglr-20 watermarkImg ">
        <div class="bd-r-10 border-3-ff Img_d">
          <img src="../../assets/img/watermarkP.svg" alt="" style="width:100%">
        </div>
      </div>
      <div class="watermarkImg fontW-7 border-r border-3-ff Img_d" style="position: relative;">
        <div class="Img_d opacity-0">
          <img src="../../assets/img/watermarkP.svg" alt="" style="width:100%">
        </div>
        <div class="watermaskDesc" style="">
          <div class="border_b-1 mg-0 theme-color text-c" style="width:98%;height:50%;">
            <p class="watermg_ft">{{$t('watermark.characteristics_text[0].value')}}</p>
            <p class="watermg_ft">{{$t('watermark.characteristics_text[1].value')}}</p>
            <p class="watermg_ft">{{$t('watermark.characteristics_text[2].value')}}</p>
          </div>
          <div class="watermark_msg mg-0">
            <p class="color-yellow text-c watermg_ft">{{$t('watermark.info_text[0].value')}}</p>
            <div class="flex-s-between theme-color watermg_ft water_w mg-0">
              <p>{{$t('watermark.info_text[1].value')}}</p>
              <p>{{$t('watermark.info_text[2].value')}}</p>
            </div>
            <div class="flex-s-between theme-color watermg_ft water_w mg-0">
              <p>{{$t('watermark.info_text[3].value')}} </p>
              <p>{{$t('watermark.info_text[4].value')}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-s-around mgtb-30">
      <el-button class="bg-yellow border-n pd-20-50" type="primary" @click="jump(1)">{{$t('watermark.watermark_start_btn')}}</el-button>
      <el-button class="bg-yellow border-n pd-20-50" type="primary" @click="jump(2)">{{$t('watermark.watermark_end_btn')}}</el-button>
    </div>
    <div class="watermarktext bg-69 boxS-i-4 font-f-ib fonW-7">
      <p class="font-30 theme-color text-c mgtb-10">{{$t('watermark.watermark_text[0].value')}}</p>
      <p class="font-28 color-f">{{$t('watermark.watermark_text[1].value')}}</p>
      <p class="font-28 color-f">{{$t('watermark.watermark_text[2].value')}}</p>
      <p class="font-28 color-f mgl-30">{{$t('watermark.watermark_text[3].value')}}</p>
      <p class="font-28 color-f mgl-30">{{$t('watermark.watermark_text[4].value')}}</p>
      <p class="font-28 color-f mgl-30">{{$t('watermark.watermark_text[5].value')}}</p>
      <p class="font-28 color-f mgt-20">{{$t('watermark.watermark_text[6].value')}}</p>
    </div>
    <div class="mg-2 fontW-7 font-20 color-a">
      <p>{{$t('watermark.statement')}}</p>
      <p>{{$t('watermark.Imeetnft')}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'watemask',
  data () {
    return {
      msg: '0101001010101010010011100111001010100101001010101010010011100111001010100101001010101010010011100111001010100101001'
    }
  },
  methods: {
    jump: function (type) {
      if (type === 1) {
        this.$router.push({
          path: '/upload_water'
        })
      } else {
        this.$router.push({
          path: '/works_Set'
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
svg {
    display: block;
}
.watermarkbox{
  width:90%;
  margin: 30px auto;
  .watermarkMsg{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: stretch;
    div {
      width: 48%;
    }
    .watermarkMsg_imge {
      div {
        background: url('../../assets/logo/watermask.png') no-repeat;
        background-size: 100% 100%;
        word-break:break-all;
        width: 100%;
        height: 100%;
      }
    }
  }
  .watermarktext{
    padding: 20px 50px 70px;
  }
  .eg {
    div {
      width: 32%;
    }
  }
  .watermarkImg{
    width:32%;
    >div {
      height: 65%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .watermaskDesc {
      position: absolute;
      top:0;
      width:100%;
      height:100%;
      display: flex;
      flex-direction: column;
      .watermark_msg{
        width: 80%;
      }
      .watermg_ft {
        font-size: 14px;
        margin-top: 10px;
      }
      .water_w {
        width: 80%;
      }
      @media screen and (max-width: 960px) {
        .watermg_ft {
          font-size: 12px;
          margin-top: 6px;
        }
      }
      @media screen and (min-width: 960px)and (max-width: 1140px) {
        .watermg_ft {
          font-size: 13px;
          margin-top: 8px;
        }
      }
      @media screen and (min-width: 1140px)and (max-width: 1280px) {
        .watermg_ft {
          font-size: 14px;
          margin-top: 9px;
        }
        .water_w {
          width: 80%;
        }
      }
      @media screen and (min-width: 1280px)and (max-width: 1440px) {
        .watermg_ft {
          font-size: 15px;
          margin-top: 13px;
        }
        .water_w {
          width: 70%;
        }
      }
      @media screen and (min-width: 1440px)and (max-width: 1600px) {
        .watermg_ft {
          font-size: 16px;
          margin-top: 15px;
        }
        .water_w {
          width: 65%;
        }
      }
      @media screen and (min-width: 1600px) {
        .watermg_ft {
          font-size: 18px;
          margin-top: 20px;
        }
        .water_w {
          width: 60%;
        }
      }
    }
  }
  .el-button--primary:focus, .el-button--primary:hover {
  background: #FFD500;
  }
}

</style>
